<template>
  <div class="view">
    <div class="top">
      <van-nav-bar fixed title="酒店详情" left-arrow @click-left="onClickLeft">
        <template #right>
          <van-icon color="#fff" size="7vw" name="phone-o" />
          <van-icon
            class="like"
            color="#fff"
            size="20px"
            :name="youLike"
            @click="changeYouLike"
          />
        </template>
      </van-nav-bar>
    </div>
    <div id="viewer"></div>
    <div class="container">
      <div class="hotelCard">
        <p class="name">{{ hotelInfo.hotel_title }}</p>
        <div class="clearfix address">
          <van-icon name="location-o" />{{ hotelInfo.hotel_adress }}
        </div>
        <van-divider :style="{ borderColor: '#bbb', margin: '5vw 0vw' }" />
        <div class="date">
          <div class="checkDateIn">
            <van-cell
              title="入住时间"
              :value="dateIn.format('MM月DD日')"
              @click="dateInShow = true"
            />
            <van-calendar
              type="range"
              color="#f5b400"
              @confirm="onConfirm"
              v-model="dateInShow"
            />
          </div>
          <div class="dateTotal">{{ day }}晚</div>
          <div class="checkDateOut">
            <van-cell
              title="离店时间"
              :value="dateOut.format('MM月DD日')"
              @click="dateOutShow = true"
            />
            <van-calendar
              type="range"
              color="#f5b400"
              @confirm="onConfirm"
              v-model="dateOutShow"
            />
          </div>
        </div>
      </div>

      <!-- 评分 -->
      <div class="score">
        <div>
          <span>{{ hotelInfo.hotel_rate }}</span> <span>分</span>
        </div>
        <div>
          <van-rate
            v-model="hotelInfo.hotel_rate"
            allow-half
            disabled
            disabled-color="#f5b400"
            void-icon="star"
            void-color="#eee"
          />
          <p>1600条评价 <van-icon name="arrow" /></p>
        </div>
      </div>

      <!-- 房间类型 -->
      <van-collapse v-model="roomShow" class="roomInfo">
        <van-collapse-item
          v-if="hotelRoomInfo.length !== 0"
          name="1"
          title="房间预定"
          :value="`${hotelInfo.hotel_price}起`"
        >
          <div class="bed" v-for="(item, index) in hotelRoomInfo" :key="index">
            <div class="info">
              <span>{{ item.room_type }}</span>
              <span><span>折扣</span><span>不含早</span></span>
            </div>
            <div class="price">￥{{ item.room_price }}</div>
            <van-button square type="primary" @click="showDetailRoom(item)"
              >查看</van-button
            >
            <van-action-sheet v-model="roomDetailShow" title="房间详情">
              <div>
                <!-- 轮播 -->
                <van-swipe :autoplay="3000">
                  <van-swipe-item
                    v-for="(image, index) in roomInfo.imgs"
                    :key="index"
                  >
                    <img v-lazy="image" />
                  </van-swipe-item>
                </van-swipe>
                <!-- icon宫格 -->
                <div class="iconBox">
                  <van-grid
                    :column-num="4"
                    icon-size="14px"
                    gutter="20"
                    :border="false"
                  >
                    <van-grid-item
                      v-for="(value, index) in roomDetailInfo"
                      :key="index"
                      icon-prefix="iconfont"
                      :icon="value.iconName"
                      :text="value.text"
                    />
                  </van-grid>
                </div>
                <!-- 展开服务与政策 -->
                <van-collapse v-model="serviceShow">
                  <van-collapse-item title="服务与政策" name="1">
                    <div class="serviceContent">
                      <div>
                        <span>特别提示</span>
                        <p>改价格仅适用于持大陆身份证的中国籍客人</p>
                        <p>免费停车场</p>
                      </div>
                      <div>
                        <span>随时取消</span>
                        <p>
                          未到入住时间前可以随时取消，本app会根据您的付款方式退还房费（如使用优惠券、会员卡则根据实际支付价格为准）
                        </p>
                      </div>
                      <div>
                        <span>立即确定</span>
                        <p>
                          预定此房型后可以快速确定订单，订单确认结果将以短信形式进行通知
                        </p>
                      </div>
                      <div>
                        <span>酒店开票</span>
                        <p>支持普通发票、专用发票、可向前台索取</p>
                      </div>
                      <div>
                        <span>在线支付</span>
                        <p>房费需要提前支付，可用微信、支付宝进行付款</p>
                      </div>
                    </div>
                  </van-collapse-item>
                </van-collapse>
                <div
                  class="priceContent"
                  style="margin: 5vw; margin-bottom: 15vw"
                >
                  <div>费用明细</div>
                  <div>
                    <div
                      style="
                        margin: 3vw;
                        display: flex;
                        justify-content: space-between;
                      "
                    >
                      <span>房费（共计{{ day }}天）</span>
                      <span
                        >￥{{ (roomInfo.room_price * day).toFixed(2) }}</span
                      >
                    </div>
                    <div
                      v-if="isLogin"
                      style="
                        margin: 3vw;
                        display: flex;
                        justify-content: space-between;
                      "
                    >
                      <span>优惠</span>
                      <span>￥{{ yh }}</span>
                    </div>
                  </div>
                </div>
                <!-- 底部预定栏 -->
                <div height="13vw">
                  <van-submit-bar
                    button-text="预定"
                    fixed
                    label="价格："
                    button-color="#f5b400"
                    :price="price * 100"
                    @submit="onSubmit"
                  >
                    <template #default>
                      <van-icon name="service-o" size="20px" />
                      <span style="padding: 2vw">客服</span>
                    </template>
                  </van-submit-bar>
                </div>
              </div>
            </van-action-sheet>
          </div>
        </van-collapse-item>
      </van-collapse>

      <!-- 促销 -->
      <div class="promotion">
        <div class="pTitle">限时促销</div>
        <div class="pInfo">
          <span class="simple">特惠</span>
          <span class="describe"
            >时租房活动价格 低至120元<van-icon name="arrow"
          /></span>
        </div>
        <div class="pInfo">
          <span class="simple">特惠</span>
          <span class="describe">
            时租房活动价格 低至120元
            <van-icon name="arrow" />
          </span>
        </div>
      </div>

      <div class="introduction">
        <van-swipe
          :loop="false"
          :show-indicators="false"
          :width="150"
          :touchable="true"
          @change="onChange"
        >
          <van-swipe-item
            v-for="(introItem, index) in hotelDetailInfo"
            :key="index"
          >
            <div>
              <div>
                {{ introItem.title }}
                <div v-show="current == index" class="indicator"></div>
              </div>
              <img :src="introItem.imgUrl" alt="" />
            </div>
          </van-swipe-item>
        </van-swipe>
        <p style="text-indent: 2em">{{ hotelInfo.hotel_intro }}</p>
      </div>

      <!-- 地图 -->
      <div class="mapContainer" id="map"></div>

      <!-- 推荐附近酒店 -->
      <div style="text-align: center; margin: 8vw">
        推荐 · <span style="color: #f5b400">周边酒店</span>
      </div>
      <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"> -->
      <div class="recommend" v-for="i in recommend" :key="i.id">
        <router-link :to="`/hotel?id=${i.id}`" class="content">
          <div class="recommendImg">
            <img v-lazy="i.hotel_img" style="width: 100%; object-fit: cover" />
          </div>
          <div class="recommendInfo">
            <div>
              <router-link :to="`/hotel?id=${i.id}`">
                {{ i.hotel_title }}
              </router-link>
            </div>
            <div>
              <div class="left">评分：{{ i.hotel_rate }}</div>
              <div class="right">
                ￥<span style="font-weight: 600; font-size: 22px">{{
                  i.hotel_price
                }}</span
                >起
              </div>
            </div>
          </div>
        </router-link>
      </div>
      <!-- </van-list>
      </van-pull-refresh> -->
      <div
        v-if="recommend.length <= 0"
        style="text-align: center; margin-bottom: 3vw"
      >
        暂无推荐酒店
      </div>
    </div>
    <!-- <bottom-tabbar /> -->
  </div>
</template>

<script>
import BottomTabbar from "@/components/BottomTabbar.vue";
// 引入地图
import AMapLoader from "@amap/amap-jsapi-loader";
// 引入moment.js
import moment from "moment";
// 引入vr全景组件
import { Viewer } from "photo-sphere-viewer";
// 引入样式
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
import { mapState } from "vuex";

export default {
  components: { BottomTabbar },
  data() {
    return {
      viewer: "", //vr全景
      dateIn: moment(sessionStorage.getItem("dateIn")) || moment(), //入住时间
      dateOut:
        moment(sessionStorage.getItem("dateOut")) || moment().add(1, "days"), //离开时间
      dateInShow: false, //是否展开入住时间的日历
      dateOutShow: false, //是否展开离开时间的日历
      roomShow: ["1"], // 是否显示房间信息
      roomDetailShow: false, //是否显示详细房间信息
      serviceShow: ["0"], // 是否显示服务与政策
      map: null, //地图
      youLike: "like-o", //顶部收藏
      roomDetailInfo: [
        {
          text: "1.5米",
          iconName: "iconfont icon-chuang",
        },
        {
          text: "16㎡",
          iconName: "iconfont icon-fangzi",
        },
        {
          text: "6层",
          iconName: "iconfont icon-loutistairs7",
        },
        {
          text: "无窗",
          iconName: "iconfont icon-chuanghu",
        },
        {
          text: "WIFI",
          iconName: "iconfont icon-wifi",
        },
        {
          text: "无线宽带",
          iconName: "iconfont icon-gongxiangkuandai",
        },
        {
          text: "禁烟",
          iconName: "iconfont icon-jinyanqu",
        },
        {
          text: "2人",
          iconName: "iconfont icon-bim_diyirencheng",
        },
        {
          text: "无早餐",
          iconName: "iconfont icon-zaocan",
        },
      ],
      hotelDetailInfo: [
        { title: "酒店介绍", imgUrl: "/Hilton/outlook1.jpg" },
        { title: "健身房", imgUrl: "/Hilton/gym1.jpg" },
        { title: "游泳池", imgUrl: "/Hilton/pool1.jpg" },
        { title: "餐厅", imgUrl: "/Hilton/dinning1.jpg" },
        { title: "会议厅", imgUrl: "/Hilton/meeting1.jpg" },
      ],
      current: 0, //轮播
      roomInfo: {}, //展开的房间信息
      recommend: [], //推荐酒店
    };
  },
  computed: {
    ...mapState({
      hotelInfo: (state) => state.hotel.hotelInfo,
      userInfo: (state) => state.user.userInfo,
      hotelRoomInfo: (state) => state.hotel.hotelRoomInfo,
    }),
    // dateIn() {
    //   return moment(sessionStorage.getItem("dateIn")) || moment();
    // },
    // dateOut() {
    //   return (
    //     moment(sessionStorage.getItem("dateOut")) || moment().add(1, "days")
    //   );
    // },
    // 计算共住几晚
    day() {
      return moment(this.dateOut).diff(moment(this.dateIn), "days");
    },
    // 获取酒店id
    id() {
      return this.$route.query.id;
    },
    uid() {
      return sessionStorage.getItem("uid");
    },
    // 用户是否登陆
    isLogin() {
      return sessionStorage.getItem("is_login") ? true : false;
    },
    // 是否优惠
    yh() {
      return this.userInfo.is_vip >= 1
        ? (this.roomInfo.room_price * this.day * 0.2).toFixed(2)
        : (0).toFixed(2);
    },
    // 单间优惠后价格
    price() {
      return this.roomInfo.room_price * this.day - this.yh;
    },
  },
  methods: {
    // 返回
    onClickLeft() {
      history.go(-1);
    },
    // 点击改变收藏状态
    changeYouLike() {
      if (this.youLike == "like") {
        this.youLike = "like-o";
      } else if (this.youLike == "like-o") {
        this.youLike = "like";
      }
    },
    //确定入住离店时间
    onConfirm(date) {
      const [start, end] = date;
      this.dateInShow = false;
      this.dateOutShow = false;
      this.dateIn = moment(start);
      this.dateOut = moment(end);
      sessionStorage.setItem("dateIn", this.dateIn);
      sessionStorage.setItem("dateOut", this.dateOut);
    },
    // 显示详细房间信息,分割轮播图数组
    showDetailRoom(roomInfo) {
      this.roomDetailShow = true;
      this.roomInfo = roomInfo;
      this.roomInfo.imgs = roomInfo.room_imgl.split(",");
    },
    //轮播
    onChange(index) {
      this.current = index;
    },
    // 确定酒店地址
    getPosition(city, title) {
      const that = this;
      AMapLoader.load({
        key: "7bfbe3ab215345f405c23b5eed760ca8",
        version: "2.0", // 指定加载的 JSAPI 版本，缺省时默认 1.4.15
        plugins: ["AMap.PlaceSearch"],
      }).then((AMap) => {
        var placeSearch = new AMap.PlaceSearch({ city });
        placeSearch.search(title, function (status, result) {
          // 搜索成功时，result即是对应的匹配数据
          if (status == "complete") {
            if (result.poiList.pois.length == 0) {
              ElMessage.error("没有查询到对应的地址");
            } else {
              let lat = result.poiList.pois[0].location.lat;
              let lng = result.poiList.pois[0].location.lng;
              that.initMap(lng, lat);
            }
          } else if (status == "no_data") {
            ElMessage.error("没有查询到对应的地址");
          }
        });
      });
    },
    // 确定酒店地址 lng lat表示酒店的经纬度
    initMap(lng, lat) {
      AMapLoader.load({
        key: "7bfbe3ab215345f405c23b5eed760ca8",
        version: "2.0", // 指定加载的 JSAPI 版本，缺省时默认 1.4.15
        plugins: ["AMap.ToolBar", "AMap.Geolocation"],
      }).then((AMap) => {
        this.map = new AMap.Map("map", {
          //设置地图容器id
          viewMode: "3D", //是否为3D地图模式
          zoom: 10, //初始化地图级别
          center: [lng, lat], //初始化地图中心点位置
          resizeEnable: true,
        });

        var marker = new AMap.Marker({
          position: [lng, lat],
        });
        this.map.add(marker); //添加到地图

        this.map.addControl(new AMap.ToolBar({ position: "RT" }));

        let geolocation = new AMap.Geolocation({
          timeout: 5000, //超过10秒后停止定位，默认：无穷大
          zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        });
        this.map.addControl(geolocation);
        geolocation.getCurrentPosition(function (status, result) {
          if (status == "complete") {
            let loc = result.position;
            console.log(loc);
          } else {
            console.log("定位失败", result.message);
          }
        });
      });
    },
    // 提交订单
    onSubmit() {
      let { room_img, room_type } = this.roomInfo;
      let params = {
        room_img,
        room_type,
        hotel_title: this.hotelInfo.hotel_title,
        price: this.price,
        yh: this.yh,
        // check_in: this.dateIn._i,
        // leave: this.dateOut._i,
        hid: this.id,
        user_id: this.uid,
      };
      // console.log(params);
      sessionStorage.setItem("orderInfo", JSON.stringify(params));
      this.$router.push("/order");
    },
    // 获取推荐酒店信息
    getRecommed(data) {
      let url = `/hotel/search?city=${data.city}&kw=${data.kw}`;
      this.axios.get(url).then((res) => {
        let result = res.data.results;
        result.forEach((item) => {
          if (item.hotel_title !== this.hotelInfo.hotel_title) {
            this.recommend.push(item);
          }
        });
      });
    },
  },
  mounted() {
    window.scrollTo(0, 0);
    // vr全景
    this.viewer = new Viewer({
      container: document.querySelector("#viewer"),
      panorama:
        "https://img0.baidu.com/it/u=4222070601,1950432524&fm=253&fmt=auto&app=138&f=JPEG?w=723&h=500",
    });

    let res = this.$store.dispatch("getHotelInfo", this.$route.query.id);
    res.then(() => {
      let city = this.$store.state.hotel.city;
      let title = this.$store.state.hotel.title;
      // 获取地理位置
      this.getPosition(city, title);
      // 获取推荐的酒店信息
      this.getRecommed({ city: city + "市", kw: "" });
    });

    this.$store.dispatch("getRoomInfo", this.$route.query.id);
    if (this.uid) this.$store.dispatch("getUserInfo", this.uid);
  },
};
</script>
<style lang='scss' scoped >
.view {
  position: relative;
  .top {
    height: 13vw;

    .like {
      margin-left: 2vw;
    }
    .van-nav-bar {
      background-color: transparent;
      background-color: #f5b400;
      color: #fff;

      ::v-deep .van-nav-bar__text,
      ::v-deep .van-nav-bar__title,
      ::v-deep .van-icon {
        color: #fff;
      }
    }
    ::v-deep .van-hairline--bottom::after {
      border-bottom-width: 0px;
    }
  }
  #viewer {
    position: absolute;
    top: 12vw;
    width: 100vw;
    height: 50vw;
  }
  .container {
    position: relative;
    top: 52vw;
    padding: 0vw 3vw;
    padding-bottom: 3vw;

    .hotelCard {
      padding: 5vw 0;
      box-shadow: 0 2px 10px 0 rgb(0 0 0 / 20%);
      background-color: #fff;
      border-radius: 2vw;

      .name {
        font-size: 22px;
        font-weight: 600;
        margin: 0vw 5vw 3vw 5vw;
      }

      .address {
        margin: 0vw 5vw;
        font-size: 16px;
        color: #bbb;
      }

      .date {
        height: 15vw;
        margin: 0;
        display: flex;
        justify-content: space-between;

        .checkDateIn,
        .checkDateOut,
        .dateTotal {
          font-size: 18px;

          .van-cell {
            padding: 0;
            width: 30vw;
            font-size: 18px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
          }
        }
        .dateTotal {
          height: 15vw;
          line-height: 15vw;
        }
      }
    }

    .score {
      margin-top: 2vw;
      display: flex;
      justify-content: center;
      align-items: center;

      > div {
        margin: 2vw;
        p {
          margin: 2vw 0 0 0;
          color: #bbb;
        }
      }
    }

    .score > div:nth-child(1) {
      font-size: 40px;
      span:nth-child(2) {
        font-size: 18px;
      }
    }

    .roomInfo {
      ::v-deep .van-hairline--top-bottom::after {
        border: none;
      }
      ::v-deep .van-collapse-item__content {
        padding: 0px;
      }
      ::v-deep.van-cell {
        padding: 10px;
        font-size: 18px;
      }
      .bed {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4vw;
        background-color: #f5f5f5;
        font-size: 18px;
        border-bottom: 1px solid #e3e3e3;

        .info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 30vw;

          > span {
            color: #f5b400;
            span {
              color: #bbb;
              font-size: 14px;
              margin-right: 2vw;
            }
          }
        }

        .van-button {
          width: 20vw;
          height: 10vw;
          border: #f5b400;
          background-color: #f5b400;
          border-radius: 5vw;
        }

        .van-action-sheet {
          height: 80%;

          .van-swipe {
            height: 50vw;
            img {
              width: 100vw;
            }
          }

          .iconBox {
            margin: 3vw 0 3vw 7vw;
            .van-grid,
            .van-grid-item {
              padding: 0 !important;
            }
            ::v-deep .van-grid-item__content {
              padding: 0px;
              flex-direction: row;
              justify-content: left;
            }
            ::v-deep .van-grid-item__text {
              margin-top: 0px;
              margin-left: 1vw;
            }
          }

          .van-collapse-item {
            padding: 0 2vw;
            .serviceContent {
              padding: 0 7vw;
              span {
                font-size: 16px;
                color: #000;
                margin: 2vw 0;
                display: inline-block;
              }
              p {
                margin: 0;
              }
            }
          }

          .van-submit-bar {
            .van-button {
              height: 8vw;
              border-radius: 8vw;
            }
          }
        }
      }
      .van-collapse-item__content .bed:last-child {
        border: none;
      }
    }

    .promotion {
      margin: 5vw 2vw;

      .pTitle {
        text-align: center;
        font-size: 20px;
        margin-bottom: 3vw;
      }
      .pInfo {
        padding: 3vw 0vw;
        .simple {
          padding: 1vw;
          margin-right: 4vw;
          border: 1px solid #f5b400;
          border-radius: 1vw;
          color: #f5b400;
        }
        .describe {
          span {
            float: left;
          }
          .van-icon {
            float: right;
            top: 1vw;
          }
        }
      }
    }

    .introduction {
      margin: 5vw 2vw;
      .van-swipe-item {
        div {
          margin-right: 10px;
          img {
            width: 140px;
          }
          div {
            height: 30px;
            margin: 0px;
            padding: 5px;
            text-align: center;
            font-size: 14px;
            color: hsl(210, 1%, 40%);
            .indicator {
              padding: 0px;
              width: 40px;
              height: 3px;
              background-color: #f5b400;
              margin: 2px auto;
            }
          }
        }
      }
      p {
        margin: 0;
        margin-top: 2vw;
      }
    }

    .mapContainer {
      margin: 5vw 2vw;
      height: 50vw;
      overflow: hidden;
      position: relative;
    }

    .content {
      margin: 2vw;
      display: flex;
      justify-content: space-between;
      height: 25vw;
    }
    .recommendImg {
      width: 40vw;
      margin-right: 2vw;
      border-radius: 2vw;
    }
    .recommendInfo {
      width: 60vw;
    }
    .recommendInfo > div:nth-of-type(1) {
      height: 12vw;
      color: #000;
      text-decoration: none;
      font-size: 18px;
      font-weight: 500;
      margin: 1vw 0;
      a:-webkit-any-link {
        color: #000;
      }
    }
    .recommendInfo > div:nth-of-type(2) {
      color: #fff;
      font-size: 12px;
      height: 6vw;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        width: 20vw;
        border-radius: 3vw;
        background-color: #f5b400;
        text-align: center;
      }

      .right {
        font-size: 14px;
        letter-spacing: 1px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        color: #333;
      }
    }
  }
}
</style>